<template>
  <div class="custom">
    <TablePage :query="query" :columns="columns" :data="data" @onLoad="onload"/>

  </div>
</template>
<script>
import TablePage from "@/components/TablePage";

export default {
  components: {TablePage},
  data() {
    return {
      query: [
        {
          type: 'text',
          label: '手机号',
          placeholder: '请输入会员手机号查询',
          key: 'mobile'
        },

        {
          type: 'select',
          label: '状态',
          placeholder: '请选择状态查询',
          key: 'status',
          styles: {width: '150px'},
          options: [
            {label: '待付款', value: 0},
            {label: '已付款', value: 1},
            {label: '已退款', value: 2},
          ]
        },
        {
          type: 'select',
          label: '金额类型',
          placeholder: '请选择金额类型查询',
          key: 'amountType',
          styles: {width: '150px'},
          options: [
            {label: '余额', value: 'money'},
            {label: '喜糖', value: 'sugar'},
          ]
        },
        {
          type: 'date-picker',
          label: '选择时间',
          placeholder: '请选择时间',
          key: 'time'
        }
      ],
      columns: [
        {
          label: '#',
          type: 'index',
          width: '80px'
        },
        {
          label: '交易会员',
          type: 'render',
          width: '230px',
          render: (data) => {
            if (!data.fields || !data.fields.user_base) return ''
            return `<div class="flex flex-center">
                        <img src="${data.fields.user_base.avatar}" style="width: 48px;height: 48px"/>
                        <div class="nickname">${data.fields.user_base.mobile}</div>
                    </div>
                    `;
          },
        },
        {
          label: '金额类型',
          width: '100px',
          prop: 'amountName',
        },
        {
          label: '提现金额',
          prop: 'totalAmount',
          width: '120px'
        },
        {
          label: '费率',
          width: '110px',
          type: "render",
          render: (data) => {
            return `${data.taxRate}%`
          }
        },
        {
          label: '手续费',
          prop: 'taxFee',
          width: '120px'
        }, {
          label: '实际到账',
          prop: 'amount',
          width: '120px'
        },
        {
          label: '提现类型',
          width: '120px',
          type: "render",
          render: (data) => {
            if (data.type == 'WXPAY')
              return '微信'
            else if (data.type == 'BANK') return '银行卡';
            else return data.type
          }
        },
        {
          label: '状态',
          type: 'render',
          width: '100px',
          render: (data) => {
            if (data.state == 'WAIT_REVIEW') return `<span class="el-tag el-tag--warning mx-1 is-round"><span class="el-tag__content">待审核</span></span>`
            else if (data.state == 'PROCESSING') return `<span class="el-tag el-tag--warning el-tag--dark mx-1 is-round"><span class="el-tag__content">付款中</span> </span>`
            else if (data.state == 'SUCCESS') return `<span class="el-tag el-tag--success el-tag--dark mx-1 is-round"><span class="el-tag__content">成功</span> </span>`
            else if (data.state == 'ERROR') return `<span class="el-tag el-tag--danger el-tag--dark mx-1 is-round"><span class="el-tag__content">出错</span> </span>`
            else if (data.state == 'REJECT') return `<span class="el-tag el-tag--danger el-tag--dark mx-1 is-round"><span class="el-tag__content">驳回</span> </span>`
            else if (data.state == 'CANCEL') return `<span class="el-tag  mx-1 is-round"><span class="el-tag__content">撤销</span> </span>`
            else return data.state;
          },
        },

        {
          label: '其他资料',
          width: '300px',
          type: "render",
          render: (data) => {
            if (data.type == 'BANK') {
              return `<div class="bank-item" style="font-size: 12px">
                        <div class="flex" style="padding: 5px;border-bottom: 1px solid #363637">
                          <div class="label" style="min-width: 60px;text-align: right">开户行:</div>
                          <div class="flex1" style="padding-left: 15px;text-align: left">${data.bank.name}</div>
                        </div>
                        <div class="flex" style="padding: 5px;border-bottom: 1px solid #363637">
                          <div class="label" style="min-width: 60px;text-align: right">卡号:</div>
                          <div class="flex1" style="padding-left: 15px;text-align: left">${data.bank.cardNo}</div>
                        </div>
                        <div class="flex" style="padding: 5px;border-bottom: 1px solid #363637">
                            <div class="label" style="min-width: 60px;text-align: right">开户人:</div>
                            <div class="flex1" style="padding-left: 15px;text-align: left">${data.bank.realName}</div>
                        </div>
                        </div>`
            }
          }
        },


        {
          label: '交易时间',
          prop: 'created',
          width: '200px',
          type: 'date'
        },
        {
          label: '操作',
          type: 'buttons',
          width: '200px',
          fixed: true,
          buttons: [
            {
              label: '审核',
              type: 'primary',
              styles: {},
              icon: 'Select',
              callback: (data) => {
                this.$confirm('确定要同意提现吗?同意后立刻转账给对方').then(() => {
                  this.$api.post('/api/merchant/finance/withdraw/check_withdraw', {}, {
                    id: [data.id],
                    status: data.type=='BANK'?'SUCCESS':'PROCESSING'
                  }).then(() => {
                    data.state = data.type=='BANK'?'SUCCESS':'PROCESSING'
                  })
                })
              },
              hidden: (data) => {
                return data.state != 'WAIT_REVIEW'
              }
            },
            {
              label: '拒绝',
              type: 'danger',
              styles: {},
              icon: 'CloseBold',
              callback: (data) => {
                this.$prompt('确定要驳回提现吗?', 'Tip', {
                  confirmButtonText: '确定',
                  cancelButtonText: '取消',
                  inputPlaceholder: '请输入驳回理由.'
                }).then(({value}) => {
                  this.$api.post('/api/merchant/finance/withdraw/check_withdraw', {}, {
                    id: [data.id],
                    status: 'REJECT',
                    message: value
                  }).then(() => {
                    data.state = 'REJECT'
                  })
                })
              },
              hidden: (data) => {
                return data.state != 'WAIT_REVIEW'
              }
            }
          ]
        }
      ],
      data: {
        total: 1000,
        list: [],
        page: 1,
        size: 40
      },
      form: {},
      dialogRecharge: false,
      dialogEdit: false

    }
  },

  methods: {
    onload(data) {
      if (data && data.page)
        this.data.page = data.page;
      if (data && data.size)
        this.data.size = data.size;

      Object.assign(data, {
        direction: 'DESC',
        properties: ['id'],
        fields: ['user_base'],
        fidType: 'USER'
      })
      this.$api.apiQuery('/api/merchant/finance/withdraw/', data).then(res => {
        this.data.total = res.total
        this.data.list = res.data;
      })
    },
  }
}
</script>